<template>
  <div id="index">
    <!-- <header>123</header>
    <i class="iconfont icon-melon" style="font-size:100px"></i> -->
    <header>
      <section>
        <i class="iconfont icon-xigua"> <span>西瓜音乐</span> </i>
        <button>下载App</button>
      </section>
      <nav>
        <ul>
          <router-link tag="li" to="/recommend">推荐音乐</router-link>
          <router-link tag="li" to="/hot">热歌榜</router-link>
          <router-link tag="li" to="/search">搜索</router-link>
        </ul>
      </nav>
    </header>

    <router-view></router-view>
  </div>
</template>

<script>
export default {
  //   async mounted() {
  //     // this._axios.get("/top/playlist/highquality").then((res) => {
  //     //   console.log(res);
  //     // });
  //     let res = await this._axios.get("/top/playlist/highquality");
  //   },
};
</script>

<style lang="scss" scoped>
// @import '~@/assets/scss/_vw.scss';//~@代表src文件
#index {
  header {
    section {
      height: _vw(152);
      background-color: #d43c33;
      display: flex;
      padding: 0 _vw(17);
      align-items: center;
      justify-content: space-between;
      button {
        width: _vw(180);
        height: _vw(65);
        border-radius: 50px;
        border: none;
        color: red;
      }
      i {
        color: #fff;
        font-size: _vw(50);
      }
    }
    nav {
      ul {
        display: flex;
        justify-content: space-around;
        border-bottom: 1px solid #c1c1c1;
        li {
          height: _vw(70);
          line-height: _vw(70);
          &.active {
            color: #e22d43;
          }
        }
      }
    }
  }
}
</style>